<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN" >
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<meta name="format-detection" content="telephone=no" />
		<title></title>
		<link id="link2" rel="stylesheet" href="${ctxStatic}/member/themes/expand/css/style.css" />
		<link id="link1" rel="stylesheet" href="${ctxStatic}/member/themes/expand/css/public.css" />
		<script type="text/javascript" src="${ctxStatic}/member/themes/expand/js/jquery-1.7.2.min.js"></script>	
		
		<style>
			.rule {line-height: 20px;padding: 10px 20px;font-size: 0.8rem;padding-bottom: 20px;}
			.alert {position: fixed;background: rgba(0, 0, 0, 0.8);height: 100%;width: 100%;z-index: 10;}
			.alert div{position: absolute; width: 100%; text-align: center; top: 50%; margin-top: -50%;}
			.green{background-color: #5eb79f;height: 40px;margin-top: 30px;font-size: 16px;width: 210px;}
			.nav{margin:0 3%; display: table; background-color: #F2F2F2; padding: 10px; width:95%; border-radius: 30px; font-size: 14px;}
			.nav  div{display: table-cell; width: 33%; text-align: center;}
			
			.timer{text-align: center;}
			.hour{background-color: #333333; border-radius: 3px; padding: 2px 4px; color: #FFFFFF;}
			.minute{background-color: #333333; border-radius: 3px; padding: 2px 4px; color: #FFFFFF;}
			.section{background-color: #333333; border-radius: 3px; padding: 2px 4px; color: #FFFFFF;}
		</style>
		
		<script type="text/javascript">
			
			var interval = 1000;
	
			function ShowCountDown(year, month, day, hour) {
				var now = new Date();
				var endDate = new Date(year, month - 1, day, hour);
				var leftTime = endDate.getTime() - now.getTime();
				var leftsecond = parseInt(leftTime / 1000);
				//var day1=parseInt(leftsecond/(24*60*60*6)); 
				var day1 = Math.floor(leftsecond / (60 * 60 * 24));
				var hour = Math.floor((leftsecond - day1 * 24 * 60 * 60) / 3600);
				var minute = Math.floor((leftsecond - day1 * 24 * 60 * 60 - hour * 3600) / 60);
				var second = Math.floor(leftsecond - day1 * 24 * 60 * 60 - hour * 3600 - minute * 60);				
				var hours = day1 * 24 + hour;
				
				if(hours<10){
					$(".hour").text("0"+hours);
				}
				else{
					$(".hour").text(hours);	
				}	
				if(minute<10 ){
					$(".minute").text("0"+minute);	
				}
				else{
					$(".minute").text(minute);	
				}
				
				if( second<10){
					$(".section").text("0"+second);
				}
				else{
					$(".section").text(second);
				}
			}
			
			window.setInterval(function() {					
				ShowCountDown(${yers},${month},${day},${hours});
			}, interval);
			
		</script>
		
	</head>
	<body>
		<c:if test="${isEnd eq 'YES' }">
			<section class="alert">
				<div>
					<c:if test="${empty isPrize || isPrize ne 'YES'}"><img src="${ctxStatic}/member/themes/expand/img/shibai.png" width="300px"/></c:if>
					<c:if test="${isPrize eq 'YES'}"><img src="${ctxStatic}/member/themes/expand/img/gaoxing.png" width="300px"/></c:if>
					<br />
					<p style="color: #FFFFFF;">
						活动已结束<br><br>
						<c:if test="${empty isPrize || isPrize ne 'YES'}">很遗憾，你没有中奖！</c:if>
						<c:if test="${isPrize eq 'YES'}">${content}</c:if>
						
					</p>
					<c:if test="${isPrize eq 'YES'}">
						<a href="${ctxFront}/member/myGoods?uid=${uid}&wechatId=${wechatId}&style=expand"><button class="tip-btn green">查看奖品</button></a>
					</c:if>
				</div>
			</section>
		</c:if>
		
		<div style="position: absolute; top: 10px; right: 10px; color: #fff;" 
			onclick="location='${ctxFront}/site/complain?uid=${uid}&wechatId=${wechatId}'">举报</div>
		<img src="${ctxUser }/recommend/${recommendConfig.rankPic }" width="100%" />		
		
		<div style="background-color: #FFFFFF; padding-top: 20px;">
			<c:if test="${isEnd ne 'YES' }">
				<div class="timer">
					<span style="color: red;">活动倒计时：</span>
					<span class="hour">00</span>
					<span style="padding: 2px 0px;">:</span>
					<span class="minute">00</span>
					<span style="padding: 2px 0px;">:</span>
					<span class="section">00</span><br /><br />
				</div>
			</c:if>
			<c:forEach items="${scoreRankList}" var="cmember" varStatus="status">
				<c:if test="${member.id == cmember.member_id }">
					<div class="nav">
						<div>${cmember.name }</div>
						<div>当前积分：${cmember.sumScore }</div>
						<div>排名：${status.index + 1}</div>
					</div>
				</c:if>
			</c:forEach>
			<div style=" padding: 10px;"></div>
		</div>
		
		<div style="background-color: #FFFFFF;">			
			<div style=" padding: 10px; border-bottom: 1px #EEEEEE solid; margin-top: 20px;">
				<i class="iconfont icon-duihuanquan" style="color: #13C7AE;"></i> 活动规则
			</div>
			<section class="rule">
				${recommendConfig.newHelp }
			</section>
		</div>
		
		<section style="margin-bottom: 20px;">		
			<div style=" padding: 10px; background-color: #FFFFFF; margin-top: 20px;">
				<i class="iconfont icon-duihuanquan" style="color: #13C7AE;"></i> 积分排行榜
			</div>
			
			<c:forEach items="${scoreRankList}" var="cmember" varStatus="status" begin="0" end="${rankNum-1}">
				<div class="table">
					<div class="table-cell" style="width:40px;">
						<div class="icobg2" 
							<c:if test="${status.index + 1 == 1}"> style="background-color: #f15b38;"</c:if>
							<c:if test="${status.index + 1 == 2}"> style="background-color: #F59730;"</c:if>
							<c:if test="${status.index + 1 == 3}"> style="background-color: #fcb61a;"</c:if>
							<c:if test="${status.index + 1 > 3}"> style="background-color: #F2F2F2; color: #333333;"</c:if>
						>${status.index + 1}</div>
					</div>
					<div class="table-cell" style="width: 10%;"> 
						<img src="<c:out value='${cmember.headimgurl }' default='http://www.hdzhx.com/zxims/static/shopping/electricityTemplate/img/weixin.png'></c:out>" /> 
					</div>
					<div class="table-cell" style="width: 50%; text-align: left;"><p><c:out value="${cmember.name }" default="匿名"></c:out></p></div>
					<div class="table-cell">${cmember.sumScore }积分</div>
				</div>
			</c:forEach>
		</section>
		
		
		<div style="height: 50px; width: 100%; padding-top: 10px; background-color: #fff;" onclick="location='http://www.hdzhx.com/boxin/index.html'">
			<img src="${ctxStatic}/member/themes/expand/img/me.jpg" width="100px">	
		</div>
		
	</body>
</html>
